<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">

		<!-- !Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>04_JavaScript_事件</title>
		<meta name="description" content="">
		<meta name="author" content="chenyong">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		
		<style type="text/css">
			
			
			body{
				margin:50px;
			}
			
			div{
				font-size:12px;
			}
			
			div.box{
				margin-top:30px;
			}
		
			
		</style>
		
		<script type="text/javascript">
			
			function fn1(item){
				alert(item.innerHTML);
			}
			
			function fn2(item,type){
				if(type == 'in'){
					item.innerHTML='<b>鼠标移上</b>';
					item.style.color='#f00';
					item.style.fontSize='14px';
				}else if(type == 'out'){
					item.innerHTML='鼠标移出';
					item.style.color='#000';
					item.style.fontSize='12px';
				}
			}
			
		</script>
	</head>
	
	<body>
		
		<h3>04_JavaScript_事件</h3>
		
		<div class="box" >
			<p><b>onclick事件</b></p>
			<p onclick="fn1(this)" style="cursor: pointer">点击一下</p>
		</div>
		
		<div class="box" >
			<p><b>onmouseover/onmouseleave事件</b></p>
			<p onmouseover="fn2(this,'in')" onmouseout="fn2(this,'out')" >移上来试试</p>
		</div>
		
	
	</body>
	
</html>